<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <meta charset="UTF-8">
    <title>推送测试</title>
    <style>
        .button {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            border-radius: 15px;
        }

        .button1 {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .button2:hover {
            box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        }
    </style>

    <script type="text/javascript">
        function onloaded(){
            let uls = document.getElementById("result_ul");
            const lis = uls.querySelectorAll("li");
            lis.forEach(li => {
                uls.removeChild(li);
            });
            {{ data | safe }}.forEach( e =>{
                var li = document.createElement("li")
                li.innerText = "" + e;
                uls.appendChild(li)
            });
            document.getElementById("battery").innerText = '{{ bTime }}' + ' ' +  {{ battery }};
        }

        function push(){
            fetch('/push/action?type=check_in',{
             method: "GET"   
            }).then(response => response.text()).then(text =>{
                document.getElementById('resResult').innerText = text;
                document.getElementById('push_button').disabled = true;
                var count = 10;
                const interval = setInterval(() => {
                    count--;
                    document.getElementById('countId').innerText = " " + count;
                    if(count == 0){
                        clearInterval(interval);
                        document.getElementById('push_button').disabled = false;
                        location.reload();
                    };
                }, 1000);
            }).then(e =>{
                
            })
            .catch(error => {
                document.getElementById('resResult').innerText = error;
            });
        };
        function pushBack(){
            fetch('/push/action?type=back_home',{
             method: "GET"
            }).then(response => response.text()).then(text =>{
                document.getElementById('resResult').innerText = text;
            }).then(e =>{

            })
            .catch(error => {
                document.getElementById('resResult').innerText = error;
            });
        };
    </script>

</head>
<body onload="onloaded()">
    <input type="button" onclick="push()" id="push_button" class="button button1" value="推送测试"/>
    <button onclick="pushBack()" id="back_button" class="button button1">推送取消</button>
    <br/>
    <span id="battery"></span>
    <br/>
    <span id="resResult"></span> <span id="countId"></span>
<div>

<ul id="result_ul">
    <li></li>
</ul>
</div>
</body>